const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
// 用来清除上一次打包得文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    entry: './src/index.ts',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        // 为了兼容IE浏览器，告诉Webpack生成打包文件的时候 不使用箭头函数
        environment:{
            arrowFunction:false
        }
    },
    //指定webpack打包时要使用模块
    module:{
        //指定要加载的规则
        rules:[{
            // test指定的是规则生效的文件
            test: /\.ts$/,
            // 要使用的loader
            // use: 'ts-loader',
            use:[
                // 配置babel
                {
                    // 指定加载器
                    loader: 'babel-loader',
                    // 设置babel
                    options: {
                        // 设置预定义环境
                        presets:[
                            [
                                // 指定环境的插件
                                "@babel/preset-env",
                                // 配置信息
                                {
                                    // 要兼容的浏览器
                                    targets:{
                                        "chrome":"58",
                                        "ie":"11"
                                    },
                                    // 指定corejs的版本
                                    "corejs":"3",
                                    // 使用corejs的方法  ，"usage" 表示 按需加载
                                    "useBuiltIns":"usage"
                                }
                            ]
                        ]
                    }
                },
                'ts-loader'
            ],
            exclude: /node_modules/
        }]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new htmlWebpackPlugin({template: './src/index.html'})
    ],
    // 用来设置引用模块
    resolve:{
        // 把所有的ts 和 js文件 当成模块来引用
        extensions: ['.ts', '.js']
    }

}

// 为了解决兼容新的问题，引入四个包 @babel/core @babel/preset-env babel-loader core-js
// 因为module rules 中的 use 是从下往上加载的，所以顺序为[babel-loader，ts-loader],
// 先用ts-loader把ts转换成js 再用babel-loader 把JS代码 转换成更低级别的JS